{% load i18n %}

<script type="text/x-template" id="suit-header-notice">
  <li v-show="show">
    <div class="toolbox-item">
      <a-popover trigger="click" placement="bottomRight" :overlayStyle="{ width: '300px', top: '50px' }">
        <a-button type="primary">
          <a-badge :count="1" dot>
            <a-icon :style="toolboxIconStyle" type="bell"></a-icon>
          </a-badge>
        </a-button>
        <template slot="content">
          <a-tabs>
            <a-tab-pane tab="通知" key="1">
              <a-list>
                <a-list-item>
                  <a-list-item-meta title="你收到了 14 份新周报" description="一年前">
                    <a-avatar style="background-color: white" slot="avatar" src="https://gw.alipayobjects.com/zos/rmsportal/ThXAXghbEsBCCSDihZxY.png"/>
                  </a-list-item-meta>
                </a-list-item>
                <a-list-item>
                  <a-list-item-meta title="你推荐的 曲妮妮 已通过第三轮面试" description="一年前">
                    <a-avatar style="background-color: white" slot="avatar" src="https://gw.alipayobjects.com/zos/rmsportal/OKJXDXrmkNshAMvwtvhu.png"/>
                  </a-list-item-meta>
                </a-list-item>
                <a-list-item>
                  <a-list-item-meta title="这种模板可以区分多种通知类型" description="一年前">
                    <a-avatar style="background-color: white" slot="avatar" src="https://gw.alipayobjects.com/zos/rmsportal/kISTdvpyTAhtGxpovNWd.png"/>
                  </a-list-item-meta>
                </a-list-item>
              </a-list>
            </a-tab-pane>
            <a-tab-pane tab="消息" key="2">
              123
            </a-tab-pane>
            <a-tab-pane tab="待办" key="3">
              123
            </a-tab-pane>
          </a-tabs>
        </template>
      </a-popover>
    </div>
  </li>
</script>

<script type="application/javascript">
  Vue.component('suit-header-notice', {
    delimiters: ['<%', '%>'],
    props: {
      show: {
        default: false,
        type: Boolean,
        required: true
      }
    },
    template: '#suit-header-notice',
    data: function () {
      return {
        toolboxIconStyle: {
          fontSize: '16px',
          padding: '4px'
        }
      }
    },
  })
</script>